<template>
  <div v-loading="isLoading">
    <el-container style="height: calc(100vh - 190px)">
      <el-main>
        <el-form
          class="mt-0.5"
          ref="ref"
          :model="form"
          label-width="120px"
          :rules="{
            type: [{ required: true, message: '请选择方案类别', trigger: 'blur' }],
            category_ids: [{ required: true, message: '请选择类别', trigger: 'blur' }],
            match_date: [{ required: true, message: '请选择赛程日期', trigger: 'blur' }],
            title: [
              { required: true, message: '请输入标题', trigger: 'blur' },
              {
                validator: (rule, value, callback) => detectionText(rule, value, callback),
                trigger: 'blur'
              }
            ],
            expires_time: [{ required: true, message: '请选择过期时间', trigger: 'blur' }],
            match_nick: [
              { required: true, message: '请输入赛事', trigger: 'blur' },
              {
                required: true,
                validator: (rule, value, callback) => detectionText(rule, value, callback),
                trigger: 'blur'
              }
            ],
            seckill_price: [
              {
                required: true,
                validator: (rule, value, callback) => msAmount(rule, value, callback),
                trigger: 'blur'
              }
            ],
            seckill_expire: [{ required: true, message: '请选择秒杀时间', trigger: 'change' }],
            match_data: [{ required: true, message: '请选择图表赛程', trigger: 'change' }],
            description: [
              { required: true, message: '请输入简介', trigger: 'blur' },
              {
                validator: (rule, value, callback) => detectionText(rule, value, callback),
                trigger: 'blur'
              }
            ],
            content: [
              { required: true, message: '请输入付费正文', trigger: 'blur' },
              {
                validator: (rule, value, callback) => detectionText(rule, value, callback),
                trigger: 'blur'
              }
            ],
            vid_img: [{ required: true, message: '请上传视频封面', trigger: 'change' }],
            vid: [{ required: true, message: '请上传视频', trigger: 'change' }],
            free_duration: [{ required: true, message: '请输入试看时长', trigger: 'blur' }],
            price: [
              {
                required: true,
                validator: (rule, value, callback) => amount(rule, value, callback),
                trigger: 'blur'
              }
            ]
          }"
        >
          <div class="Grid Grid--1of2">
            <div class="Grid-cell" style="min-width: 610px">
              <el-form-item
                v-if="releaseType != 1"
                label="方案类别"
                prop="type"
                :required="!releaseType"
              >
                <!-- <el-radio-group v-model="category_ids" class="" @change="getMatch">
                  <el-radio :value="3" size="large">足球</el-radio>
                  <el-radio :value="4" size="large">篮球</el-radio>
                </el-radio-group> -->
                <div class="Grid Grid--center text-sm category-select-btn">
                  <div
                    :class="['item', { active: form.type == 1 }]"
                    @click=";(form.type = 1), form.content == ''"
                    style="margin-right: 10px"
                  >
                    文章
                  </div>
                  <div
                    :class="['item', { active: form.type == 2 }]"
                    @click=";(form.type = 2), form.content == '视频'"
                  >
                    视频
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="类别" prop="category_ids" :required="!releaseType">
                <!-- <el-radio-group v-model="category_ids" class="" @change="getMatch">
                  <el-radio :value="3" size="large">足球</el-radio>
                  <el-radio :value="4" size="large">篮球</el-radio>
                </el-radio-group> -->
                <div class="Grid Grid--center text-sm category-select-btn">
                  <div
                    :class="['item', { active: category_ids == 3 }]"
                    @click="
                      () => {
                        category_ids = 3
                        getMatch()
                      }
                    "
                    style="margin-right: 10px"
                  >
                    足球
                  </div>
                  <div
                    :class="['item', { active: category_ids == 4 }]"
                    @click="
                      () => {
                        category_ids = 4
                        getMatch()
                      }
                    "
                  >
                    篮球
                  </div>
                </div>
              </el-form-item>
              <div class="Grid Grid--1of2 Grid--center">
                <div class="Grid-cell">
                  <el-form-item label="选择赛事" prop="category_ids" :required="!releaseType">
                    <div class="Grid Grid--center text-sm category-select-btn">
                      <div
                        :class="['item', { active: !is_match_info }]"
                        @click="
                          () => {
                            is_match_info = false
                            handleCheckBox()
                          }
                        "
                        style="margin-right: 10px"
                      >
                        系统赛事
                      </div>
                      <div
                        :class="['item', { active: is_match_info }]"
                        @click="
                          () => {
                            is_match_info = true
                            handleCheckBox()
                          }
                        "
                      >
                        自定义
                      </div>
                    </div>
                  </el-form-item>
                </div>
                <div v-if="!is_match_info" class="Grid-cell">
                  <el-form-item label="赛程日期" prop="match_date" :required="!releaseType">
                    <!-- <el-radio-group v-model="form.match_date" @change="getMatch">
                      <el-radio :label="today">今天</el-radio>
                      <el-radio :label="tomorrow">明天</el-radio>
                      <el-radio :label="theday">后天</el-radio>
                    </el-radio-group> -->
                    <div class="Grid Grid--center text-sm custom-select-btn" style="width: 100%">
                      <div
                        :class="['item', { active: form.match_date == today }]"
                        @click="
                          () => {
                            form.match_date = today
                            getMatch()
                          }
                        "
                      >
                        今天
                      </div>
                      <div
                        :class="['item', { active: form.match_date == tomorrow }]"
                        @click="
                          () => {
                            form.match_date = tomorrow
                            getMatch()
                          }
                        "
                        style="margin-left: 10px"
                      >
                        明天
                      </div>
                      <div
                        :class="['item', { active: form.match_date == theday }]"
                        @click="
                          () => {
                            form.match_date = theday
                            getMatch()
                          }
                        "
                        style="margin-left: 10px"
                      >
                        后天
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <el-form-item v-if="!is_match_info" label="" prop="match_nick">
                <el-select
                  class="ya-select-field"
                  v-model="form.match_info"
                  filterable
                  clearable
                  placeholder="请选择系统赛事"
                  :disabled="is_match_info"
                  @change="handleMatchChange"
                  @clear="
                    () => {
                      form.match_info = ''
                      form.match_nick = ''
                      form.expires_time = ''
                      historyMatchInfo = {
                        match_info: '',
                        match_nick: '',
                        expires_time: ''
                      }
                      getMatch()
                    }
                  "
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="is_match_info" label="" prop="match_nick">
                <el-input
                  class="ya-select-field"
                  v-model="form.match_nick"
                  :disabled="form.match_info ? true : false"
                  placeholder="请输入自定义内容"
                  clearable
                  style="width: 100%"
                  @change="
                    () => {
                      form.match_nick = form.match_nick
                    }
                  "
                />
              </el-form-item>
              <el-form-item label="标题" prop="title" :required="!releaseType">
                <el-input
                  class="ya-select-field"
                  v-model="form.title"
                  placeholder="请输入方案标题"
                  clearable
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  onkeydown="if(event.keyCode == 32 || event.keyCode == 13)return false;"
                  style="width: 100%"
                  @change="
                    () => {
                      form.name = form.title
                    }
                  "
                />
              </el-form-item>
              <div class="Grid Grid--1of2">
                <div class="Grid-cell">
                  <el-form-item label="方案过期时间" prop="expires_time" :required="!releaseType">
                    <el-date-picker
                      class="ya-select-field"
                      v-model="form.expires_time"
                      type="datetime"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择过期时间"
                      style="width: 100%"
                    />
                  </el-form-item>
                </div>
                <div class="Grid-cell">
                  <el-form-item label="发布时间" prop="release_time">
                    <div class="w-full mb-2">
                      <el-date-picker
                        class="ya-select-field"
                        v-model="form.release_time"
                        type="datetime"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请设置发布时间"
                        style="width: 100%"
                      />
                    </div>
                    <div style="display: flex; width: 100%; text-align: right">
                      <el-switch
                        v-if="!form.draft_status"
                        v-model="isPushFans"
                        :active-value="1"
                        :inactive-value="0"
                      />
                      <div v-if="!form.draft_status" class="ml-1">同时通知已购买的粉丝</div>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="价格" prop="price" :required="!releaseType">
                <div class="Media" style="width: 100%">
                  <div>
                    <el-input
                      class="ya-select-field"
                      v-model="form.price"
                      placeholder="请输入价格"
                      style="width: 80px; margin-right: 10px"
                      :max="2999"
                      @input="
                        () => {
                          if ([0, 88, 188, 288, 388, 488, 688, 888].includes(form.price * 1))
                            price = form.price * 1
                          else price = ''
                          getPrice(form.price)
                        }
                      "
                    />
                  </div>
                  <div class="Media-body">
                    <div class="Grid Grid--center text-sm custom-select-btn" style="width: 100%">
                      <div
                        :class="['item', { active: price == 0 }]"
                        @click="
                          () => {
                            price = 0
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        免费
                      </div>
                      <div
                        :class="['item', { active: price == 88 }]"
                        @click="
                          () => {
                            price = 88
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        88元
                      </div>
                      <div
                        :class="['item', { active: price == 188 }]"
                        @click="
                          () => {
                            price = 188
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        188元
                      </div>
                      <div
                        :class="['item', { active: price == 288 }]"
                        @click="
                          () => {
                            price = 288
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        288元
                      </div>
                      <div
                        :class="['item', { active: price == 388 }]"
                        @click="
                          () => {
                            price = 388
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        388元
                      </div>
                      <div
                        :class="['item', { active: price == 488 }]"
                        @click="
                          () => {
                            price = 488
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        488元
                      </div>
                      <div
                        :class="['item', { active: price == 688 }]"
                        @click="
                          () => {
                            price = 688
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        688元
                      </div>
                      <div
                        :class="['item', { active: price == 888 }]"
                        @click="
                          () => {
                            price = 888
                            form.price = price
                            getPrice(price)
                          }
                        "
                        style="width: 60px; margin-right: 10px; margin-bottom: 10px"
                      >
                        888元
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <div class="Grid Grid--1of3 Grid--center">
                <div class="Grid-cell">
                  <el-form-item label="是否置顶" prop="is_top">
                    <div class="Grid Grid--center text-sm on_top">
                      <div
                        :class="['item', { active: form.is_top == 0 }]"
                        @click="form.is_top = 0"
                        style="width: 30px; margin-right: 10px"
                      >
                        否
                      </div>
                      <div
                        :class="['item', { active: form.is_top == 1 }]"
                        @click="form.is_top = 1"
                        style="width: 30px"
                      >
                        是
                      </div>
                    </div>
                  </el-form-item>
                </div>
                <!-- <div class="Grid-cell">
                  <el-form-item label="所属公众号" prop="wechat_id" label-width="100px">
                    <el-select
                      class="ya-select-field"
                      v-model="form.wechat_id"
                      filterable
                      placeholder="请选择公众号"
                      :disabled="form.content_id != ''"
                      @change="handleMatchChange"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in wechat_list"
                        :key="index"
                        :label="item.title"
                        :value="item.wechat_id"
                      />
                    </el-select>
                  </el-form-item>
                </div> -->
                <div class="Grid-cell">
                  <el-form-item label="屏蔽谁" prop="invisible_ids" label-width="100px">
                    <el-input
                      class="ya-select-field"
                      :modelValue="
                        form.invisible_ids.length
                          ? `含[${form.invisible_ids[0].nickname}...] 共${form.invisible_ids.length}人`
                          : '请选择用户'
                      "
                      placeholder="请选择屏蔽用户"
                      clearable
                      readonly
                      style="width: 100%"
                      @click="
                        () => {
                          invisibleVisible = true
                        }
                      "
                    />
                  </el-form-item>
                </div>
              </div>
              <el-form-item v-if="marketData.length" label="营销方案">
                <el-checkbox-group v-model="form.market_ids">
                  <el-checkbox
                    v-for="(item, index) in marketData"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.is_open == 1"
                    @change="marketDataChange"
                  >
                    <div style="display: flex; align-items: center">
                      {{ item.title }}
                      <el-tooltip
                        class="box-item"
                        :content="item.rule"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="不中包退" :disabled="true">
                    <div style="display: flex; align-items: center">
                      不中包退
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="组合销售" :disabled="true">
                    <div style="display: flex; align-items: center">
                      组合销售
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="好物搭桥" :disabled="true">
                    <div style="display: flex; align-items: center">
                      好物搭桥
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="幸运转盘" :disabled="true">
                    <div style="display: flex; align-items: center">
                      幸运转盘
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="充值面单" :disabled="true">
                    <div style="display: flex; align-items: center">
                      充值免单
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <!-- <el-checkbox label="蛇年活动" :disabled="true">
                    <div style="display: flex; align-items: center">
                      蛇年活动
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox> -->
                  <el-checkbox label="双倍积分" :disabled="true">
                    <div style="display: flex; align-items: center">
                      双倍积分
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="三倍积分" :disabled="true">
                    <div style="display: flex; align-items: center">
                      三倍积分
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="绝杀预警" :disabled="true">
                    <div style="display: flex; align-items: center">
                      绝杀预警
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                  <el-checkbox label="异动分析" :disabled="true">
                    <div style="display: flex; align-items: center">
                      异动分析
                      <el-tooltip
                        class="box-item"
                        :content="`敬请期待`"
                        effect="light"
                        raw-content
                        placement="top-start"
                      >
                        <el-icon class="ml-0.5" color="#979797" size="18"
                          ><QuestionFilled
                        /></el-icon>
                      </el-tooltip>
                    </div>
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item v-if="form.market_ids.includes(5)" label="">
                <div style="width: 100%; background-color: #ebf6f9; padding: 20px 10px">
                  <div style="color: #222222; padding-left: 52px">定时秒杀</div>
                  <div
                    class="Grid Grid--1-of2 Grid--center"
                    style="width: 100%; margin-bottom: 20px"
                  >
                    <div class="Grid-cell">
                      <div class="Grid Grid--center">
                        <el-form-item label="秒杀价格" prop="seckill_price" required>
                          <el-input
                            class="ya-select-field bj_color_fff"
                            v-model="form.seckill_price"
                            placeholder="请输入秒杀价格"
                            clearable
                            type="number"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </div>
                    </div>
                    <div class="Grid-cell">
                      <div class="Grid Grid--center">
                        <el-form-item label="秒杀总数" prop="seckill_stock">
                          <el-input
                            class="ya-select-field bj_color_fff"
                            v-model="form.seckill_stock"
                            placeholder="请输入秒杀总数"
                            clearable
                            type="number"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                  <div class="Grid Grid--1-of2 Grid--center" style="width: 100%">
                    <div class="Grid-cell">
                      <div class="Grid Grid--center">
                        <el-form-item label="结束时间" prop="seckill_expire" required>
                          <el-date-picker
                            class="ya-select-field bj_color_fff"
                            v-model="form.seckill_expire"
                            type="datetime"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="请选择过期时间"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </div>
                    </div>
                    <div class="Grid-cell">
                      <div class="Grid Grid--center">
                        <el-form-item label="虚拟库存" prop="surplus_show">
                          <el-input
                            class="ya-select-field bj_color_fff"
                            v-model="form.surplus_show"
                            placeholder="请输入虚拟库存"
                            clearable
                            type="number"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item v-if="form.market_ids.includes(6)" label="">
                <div style="width: 100%; background-color: #ebf6f9; padding: 20px 10px">
                  <div style="color: #222222; padding-left: 52px">柯伊伯大数据分析</div>
                  <div class="Grid Grid--center" style="width: 100%; margin-bottom: 20px">
                    <el-form-item
                      class="ya-select-field bj_color_fff"
                      label="选择赛事"
                      prop="match_data"
                      required
                      style="width: 100%; margin-bottom: 10px"
                    >
                      <el-select
                        v-model="form.match_data"
                        filterable
                        clearable
                        placeholder="请选择"
                        @change="radarChartChange"
                        style="width: 100%"
                        @clear="
                          () => {
                            form.match_data = ''
                            form.kuiper_data = ''
                            getMatch()
                          }
                        "
                      >
                        <el-option
                          v-for="(item, index) in options"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label=" " style="width: 100%">
                      <div
                        v-if="!form.kuiper_data.length && form.match_info"
                        style="color: #e6a23c"
                      >
                        本场赛事无图表分析
                      </div>
                      <div v-if="form.kuiper_data.length" style="color: #005266">
                        本场赛事占比：主队{{ form.kuiper_data[0].bar }}% vs 客队{{
                          form.kuiper_data[1].bar
                        }}%
                      </div>
                      <!-- <el-alert
                        v-if="!form.kuiper_data.length && form.match_info"
                        :closable="false"
                        title="本场赛事无图表分析"
                        type="warning"
                      />
                      <el-alert
                        v-if="form.kuiper_data.length"
                        :closable="false"
                        :title="`本场赛事占比：主队${form.kuiper_data[0].bar}% vs 客队${form.kuiper_data[1].bar}%`"
                        type="success"
                      /> -->
                    </el-form-item>
                  </div>
                </div>
              </el-form-item>
            </div>

            <div class="Grid-cell" style="min-width: 610px">
              <el-form-item
                class="displayStyle"
                v-if="form.type == 1"
                label="简介"
                prop="description"
                :required="!releaseType"
              >
                <RichEditor style="max-width: 35vw" v-model="form.description" />
                <div
                  v-if="JSON.stringify(descriptionInfo) != '{}' && descriptionInfo.data.falg"
                  style="
                    color: #ed5454 !important;
                    font-size: 12px;
                    line-height: 1;
                    padding-top: 2px;
                  "
                >
                  {{ descriptionInfo.data.violations }}
                </div>
              </el-form-item>
              <el-form-item
                v-if="form.type == 2"
                label="简介"
                prop="description"
                :required="!releaseType"
              >
                <el-input
                  v-model="form.description"
                  class="ya-select-field"
                  type="textarea"
                  onkeydown="if(event.keyCode == 32 || event.keyCode == 13)return false;"
                  show-word-limit
                  maxlength="50"
                  placeholder="请输入简介"
                />
              </el-form-item>
              <el-form-item v-if="form.type == 1">
                <div
                  v-for="(item, index) in form.img_url_list"
                  :key="index"
                  style="
                    width: 98px;
                    height: 98px;
                    margin-right: 16px;
                    margin-bottom: 16px;
                    position: relative;
                    border: 1px dashed #ccc;
                  "
                >
                  <img
                    src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/close.png"
                    style="
                      width: 20px;
                      height: 20px;
                      position: absolute;
                      right: -8px;
                      top: -8px;
                      z-index: 9;
                      cursor: pointer;
                    "
                    @click="deleImg(index, 'description')"
                    alt=""
                  />
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :infinite="false"
                    :preview-src-list="form.img_url_list"
                    :initial-index="index"
                    fit="cover"
                  />
                </div>
                <div
                  class="uploadImg"
                  @click="
                    () => {
                      contentFileDialog = true
                      uploadFileType = 'description'
                    }
                  "
                >
                  <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                  <div>上传图片</div>
                </div>
              </el-form-item>
              <el-form-item
                class="displayStyle"
                v-if="form.type == 1"
                label="付费正文"
                prop="content"
                :required="!releaseType"
              >
                <RichEditor style="max-width: 35vw" v-model="form.content" />
                <div
                  v-if="JSON.stringify(contentInfo) != '{}' && contentInfo.data.falg"
                  style="
                    color: #ed5454 !important;
                    font-size: 12px;
                    line-height: 1;
                    padding-top: 2px;
                  "
                >
                  {{ contentInfo.data.violations }}
                </div>
              </el-form-item>
              <el-form-item v-if="form.type == 1">
                <div
                  v-for="(item, index) in form.img_url_list_main"
                  :key="index"
                  style="
                    width: 98px;
                    height: 98px;
                    margin-right: 16px;
                    margin-bottom: 16px;
                    position: relative;
                    border: 1px dashed #ccc;
                  "
                >
                  <img
                    src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/close.png"
                    style="
                      width: 20px;
                      height: 20px;
                      position: absolute;
                      right: -8px;
                      top: -8px;
                      z-index: 9;
                      cursor: pointer;
                    "
                    @click="deleImg(index, 'content')"
                    alt=""
                  />
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :infinite="false"
                    :preview-src-list="form.img_url_list_main"
                    :initial-index="index"
                    fit="cover"
                  />
                </div>
                <div
                  class="uploadImg"
                  @click="
                    () => {
                      contentFileDialog = true
                      uploadFileType = 'content'
                    }
                  "
                >
                  <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                  <div>上传图片</div>
                </div>
              </el-form-item>
              <el-form-item label="视频封面" prop="vid_img" v-if="form.type == 2">
                <div
                  class="uploadImg upload_vid_img"
                  @click="
                    () => {
                      fileDialog = true
                      uploadFileType = 'vid_img'
                    }
                  "
                >
                  <el-image
                    v-if="form.vid_img"
                    style="width: 96px; height: 96px; background: #fff"
                    :src="form.vid_img"
                    fit="scale-down"
                  />
                  <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                  <div>上传封面</div>
                </div>
                <div
                  style="
                    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                    font-weight: 400;
                    font-size: 14px;
                    color: #999999;
                    line-height: 20px;
                    margin-left: 28px;
                  "
                >
                  支持jpg/png/jpeg，图片上传建议尺寸9:16
                </div>
              </el-form-item>
              <el-form-item label="上传视频" prop="vid" v-if="form.type == 2">
                <el-upload
                  v-loading="spLoading"
                  element-loading-text="上传中"
                  class="avatar-uploader"
                  :show-file-list="false"
                  :http-request="beforeAvatarUpload"
                  accept="video/*"
                >
                  <!-- <img v-if="form.vid" :src="form.vid" class="avatar" /> -->
                  <div
                    style="width: 98px; height: 98px; padding-top: 20px; text-align: center"
                    v-if="form.vid"
                  >
                    <img
                      width="30px"
                      src="https://code-app.oss-cn-beijing.aliyuncs.com/other/60.png"
                      alt=""
                    />
                    <div style="color: rgb(82, 179, 109); padding: 4px 0px; line-height: 16px">
                      上传成功
                    </div>
                  </div>
                  <el-icon v-else class="avatar-uploader-icon-video"><Plus /></el-icon>
                </el-upload>
                <div
                  style="
                    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                    font-weight: 400;
                    font-size: 14px;
                    color: #999999;
                    line-height: 20px;
                    margin-left: 28px;
                  "
                >
                  <div>支持mp4，avi，wmv，mov，fv，rmv，3gp，m4v，mkv格式</div>
                  <div>单个视频5分钟以内</div>
                  <div>最大不超过50M</div>
                </div>
              </el-form-item>

              <el-form-item
                label="试看时长"
                prop="free_duration"
                v-if="form.type == 2 && marketData.length"
              >
                <div style="position: relative">
                  <el-input
                    class="ya-select-field"
                    v-model="form.free_duration"
                    placeholder="请输入试看时长"
                    clearable
                    style="width: 200px"
                  >
                  </el-input>
                  <span style="position: absolute; right: 6px">秒</span>
                </div>
                <div
                  style="
                    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                    font-weight: 400;
                    font-size: 14px;
                    color: #999999;
                    line-height: 20px;
                    margin-left: 28px;
                  "
                >
                  注意:试看时长为视频开始时间往后计算，且仅对付费视频生效。
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-main>
      <el-footer style="border-top: 1px solid #f1eeee">
        <div class="Grid Grid--center Grid" style="width: 100%; height: 100%">
          <div class="Grid-cell">
            <div v-if="(!form.content_id || form.draft_status) && !releaseType">
              <el-radio-group
                v-model="schemeStatus"
                class=""
                @change="
                  () => {
                    schemeStatus = e.value
                  }
                "
              >
                <el-radio :value="0" size="large">发布</el-radio>
                <el-radio :value="1" size="large">发布并通知</el-radio>
                <el-radio :value="2" size="large">存草稿</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div v-if="!releaseType">
            <el-button
              size="large"
              @click="
                () => {
                  resetForm()
                }
              "
              >清空</el-button
            >
            <el-button
              v-if="!form.content_id || form.draft_status"
              type="primary"
              size="large"
              @click="
                () => {
                  let obj = null
                  if (schemeStatus == 0) {
                    form.push_fans = 0
                    obj = { draft_status: 0 }
                  }
                  if (schemeStatus == 1) {
                    form.push_fans = 1
                    obj = { draft_status: 0 }
                  }
                  if (schemeStatus == 2) {
                    obj = { draft_status: 1 }
                  }
                  submit(obj)
                }
              "
              >提交</el-button
            >
            <el-button
              v-if="form.content_id && !form.draft_status"
              type="primary"
              size="large"
              @click="
                () => {
                  if (isPushFans) {
                    form.push_fans = 2
                  } else {
                    form.push_fans = 1
                  }
                  submit({ draft_status: 0 })
                }
              "
              >保存</el-button
            >
          </div>
          <div v-if="releaseType">
            <div class="Grid Grid--center Grid--justifyFlexEnd">
              <el-button
                size="large"
                @click="
                  () => {
                    resetForm()
                  }
                "
                >清空</el-button
              >
              <el-button
                type="primary"
                size="large"
                @click="
                  () => {
                    submit({ draft_status: 3 })
                  }
                "
                >存模板</el-button
              >
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>

    <!-- 屏蔽用户 -->
    <invisible
      :visible="invisibleVisible"
      :toggleSelectionList="form.invisible_ids"
      :param="{ wechat_id: form.wechat_id }"
      @handle-close="invisibleVisible = false"
      @handle-complete="handleInvisibleComplete"
    />
    <!-- 付费正文-上传图片墙 -->
    <el-dialog
      v-model="contentFileDialog"
      :title="fileTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="1vh"
      width="80%"
      append-to-body
    >
      <FileManage
        :file-type="fileType"
        :isAll="false"
        @file-cancel="contentFileDialog = false"
        @file-submit="contentFileSubmit"
      />
    </el-dialog>
    <!-- 视频封面 -->
    <el-dialog
      v-model="fileDialog"
      :title="fileTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="1vh"
      width="80%"
      append-to-body
    >
      <FileManage
        :file-type="fileType"
        :fileSelectType="fileSelectType"
        :isAll="false"
        @file-cancel="fileDialog = false"
        @file-submit="fileSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import RichEditor from '@/components/RichEditor/index.vue'
import Invisible from '../../cps/invisible.vue'
import dayjs from 'dayjs'
import FileManage from '@/components/FileManage/index.vue'
import {
  add,
  edit,
  marketList,
  kuiperMarket,
  getStsToken,
  getVidInfo,
  check
} from '@/api/content/content'
import { useUserStoreHook } from '@/store/modules/user'
import _ from 'lodash'

export default {
  name: 'AddEdit',
  components: { RichEditor, Invisible, FileManage },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => ({})
    },
    releaseType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: false,
      spLoading: false,
      is_match_info: false,
      schemeStatus: 1,
      uploadFileType: '',
      marketData: [], //营销方案列表
      market_ids: [], //选中的id
      marketDataList: [], //选中的id
      fileDialog: false, //文件管理弹窗
      fileSelectType: 'radio', //文件选择类型，单选---多选
      fileType: 'image', //文件类型
      today: dayjs().format('YYYY-MM-DD'), //今天
      tomorrow: dayjs().add(1, 'day').format('YYYY-MM-DD'), //明天
      theday: dayjs().add(2, 'day').format('YYYY-MM-DD'), //后天
      isPushFans: 0, //是否开启发布时间
      invisibleVisible: false, //屏蔽弹窗
      contentFileDialog: false, //付费正文上传文件弹窗
      // 价格选择
      price: 288,
      // 分类Id
      category_ids: 3,
      form: {
        content_id: '', // 方案id
        // 赛程日期
        match_date: dayjs().format('YYYY-MM-DD'),
        category_ids: [], // 类型：3 足球 4 篮球
        name: '',
        title: '', // 方案标题
        expires_time: '', // 方案过期时间
        match_info: '', // 方案关联的赛事(json)
        price: 288, // 价格
        img_url_list: [], //简介图片墙
        img_url: '',
        img_url_list_main: [], //付费图片墙
        img_main: '',
        url: '', //海报模板
        description: '', // 方案描述
        content: '', // 方案付费内容
        is_top: 0, // 是否置顶，1是0否
        is_hot: 0, // 是否热门，1是0否
        is_rec: 0, // 是否推荐，1是0否
        is_disable: 0, // 是否禁用，1是0否
        wechat_id: '', // 方案关联公众号
        invisible_ids: [], // 屏蔽不让查看的会员id,逗号分割
        release_time: '', // 定时发布时间
        push_fans: 0, // 方案发布时是否向粉丝推送(1-推送,0-不推送)
        poster_info: 1, // 海报信息
        draft_status: 1, // 草稿状态(1-是,0-否)
        match_nick: '',
        market_ids: [], //营销方案
        seckill_price: null, //秒杀价格
        seckill_expire: '', //秒杀时间
        seckill_stock: null, //秒杀库存
        surplus_show: null, //虚拟总数
        hits_show: '', //不知道啥就是要传这个字段
        kuiper_data: [], //图表数据
        match_data: '', //赛事图表
        type: 1, // 1文章 2视频
        vid: '', // 视频id
        vid_img: '', // 视频封面地址
        free_duration: '', // 试看时长
        duration: '' //总时长
      },
      // 赛事接口配置
      matchApi: {
        3: 'http://goalapi.feiyanfly.com/api/match/footballMatchList',
        4: 'http://goalapi.feiyanfly.com/api/match/basketballMatchList'
      },
      // 赛程集合
      options: [],
      // 公众号集合
      // wechat_list: [],
      // 存储历史选择赛程信息
      historyMatchInfo: {
        match_info: '',
        match_nick: '',
        expires_time: ''
      },
      stsProgress: 0,
      uploader: null,
      statusText: '',
      uploadDisabled: true, // 开始上传
      resumeDisabled: true, // 暂停
      pauseDisabled: true, // 恢复上传
      descriptionInfo: {},
      contentInfo: {}
    }
  },
  // watch: {
  //   visible(val) {
  //     this.resetForm()
  //   }
  // },
  mounted() {
    // 初始化
    this.$nextTick(() => {
      this.initData()
    })
  },
  methods: {
    initData() {
      const userStore = useUserStoreHook()
      // this.wechat_list = userStore.user.wechat_list
      // this.form.wechat_id = this.wechat_list.length != 0 ? this.wechat_list[0].wechat_id : ''
      console.log(this.form)
      if (Object.keys(this.data).length) {
        this.form = this.data
        if (this.form.draft_status == 1) {
          this.schemeStatus = 2
          if (!this.form.content_id) this.schemeStatus = 1
        }
        this.is_match_info = this.form.match_info == '' ? true : false
        // 初始化数据
        this.category_ids = this.form.category_ids[0]
        let data = this.form.match_info ? this.form.match_info : this.form.match_data
        if (data) {
          let v = JSON.parse(data)
          this.options = [
            {
              value: JSON.stringify({
                match_id: v.match_id,
                match_time: v.match_time,
                home_team_info: v.home_team_info,
                away_team_info: v.away_team_info,
                competition_info: v.competition_info
              }),
              label: `赛事:${v.competition_info.name}, 主队:[${v.home_team_info.team_name}] VS 客队:[${v.away_team_info.team_name}],赛事时间：${v.match_time}`
            }
          ]
        }
        if ([0, 5, 10, 28, 38, 58, 88, 188, 288, 388, 488, 688, 888].includes(this.form.price * 1))
          this.price = this.form.price * 1
        else this.price = ''
      } else {
        // 加载当天赛事
        this.getMatch()
      }
      this.marketList()
    },
    submit(obj) {
      if (obj.draft_status == 3) {
        this.submitSave(obj)
        return
      }
      this.$refs['ref'].validate((valid) => {
        if (valid) {
          if (this.form.type == 2) {
            getVidInfo({ vid: this.form.vid }).then((res) => {
              console.log(res, 'res')
              if (res.code === 200) {
                console.log(
                  res.data,
                  'res.data',
                  !Object.keys(res.data).length || !res.data.duration
                )
                if (!Object.keys(res.data).length || !res.data.duration) {
                  ElMessage.error('视频解析中，静等几秒后再点提交~')
                } else {
                  if (
                    this.form.free_duration * 1 > res.data.duration ||
                    this.form.free_duration * 1 == res.data.duration
                  ) {
                    ElMessage.error('视频试看时长不可大于或等于视频总时长')
                  } else {
                    this.form.duration = res.data.duration
                    if (!(this.form.price * 1) && !obj.draft_status) {
                      ElMessageBox.confirm('此篇方案当前价格是免费?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        this.submitSave(obj)
                      })
                    } else {
                      this.submitSave(obj)
                    }
                  }
                }
              }
            })
          } else {
            if (!(this.form.price * 1) && !obj.draft_status) {
              ElMessageBox.confirm('此篇方案当前价格是免费?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.submitSave(obj)
              })
            } else {
              this.submitSave(obj)
            }
          }
        } else {
          ElMessage.error('请完善必填项（带红色星号*）')
        }
      })
    },
    async submitSave(obj) {
      if (this.form.type == 1) {
        if (this.form.description && this.form.description != '<p><br></p>') {
          let data = await check({ text: this.form.description })
          console.log(data, 'data')
          this.descriptionInfo = {
            code: 200,
            data: {
              falg: data.data.flag,
              violations: `不能${data.msg} "${data.data.violations}"`
            }
          }
        } else {
          this.descriptionInfo = {
            code: 200,
            data: {
              falg: true,
              violations: '请输入简介'
            }
          }
        }
        if (this.form.content && this.form.content != '<p><br></p>') {
          let data = await check({ text: this.form.content })
          this.contentInfo = {
            code: 200,
            data: {
              falg: data.data.flag,
              violations: `不能${data.msg} "${data.data.violations}"`
            }
          }
        } else {
          this.contentInfo = {
            code: 200,
            data: {
              falg: true,
              violations: '请输入付费正文'
            }
          }
        }
      }
      if (this.descriptionInfo.code == 200 && this.descriptionInfo.data.falg) {
        return
      }
      if (this.contentInfo.code == 200 && this.contentInfo.data.falg) {
        return
      }
      if (obj) this.form.draft_status = obj.draft_status
      this.form.img_url = _.cloneDeep(this.form.img_url_list).join(',')
      this.form.img_main = _.cloneDeep(this.form.img_url_list_main).join(',')
      if (!Number(this.form.price) > 0) {
        this.form.market_ids = [] //营销方案
        this.form.seckill_price = null //秒杀价格
        this.form.seckill_expire = '' //秒杀时间
        this.form.seckill_stock = null //秒杀库存
        this.form.surplus_show = null //虚拟总数
      }
      if (this.form.content_id) {
        edit(this.form)
          .then((res) => {
            if (res.code == 200) {
              this.resetForm()
              // this.$emit('handleComplete')
              // this.$emit('handleClose')
              this.$router.replace(`/article/index?type=${obj.draft_status}`)
              ElMessage.success(res.msg)
            }
          })
          .catch(() => {})
      } else {
        add(this.form)
          .then((res) => {
            if (res.code == 200) {
              this.resetForm()
              // this.$emit('handleComplete')
              // this.$emit('handleClose')
              this.$router.replace(`/article/index?type=${obj.draft_status}`)
              ElMessage.success(res.msg)
            }
          })
          .catch(() => {})
      }
    },
    // 针对营销方案做金额判断
    getPrice(e) {
      let that = this
      if (that.marketData.length) {
        that.marketDataList = _.cloneDeep(that.marketData)
      }
      if (that.form.market_ids.length) {
        that.market_ids = _.cloneDeep(that.form.market_ids)
      }
      if (Number(e) > 0) {
        that.form.market_ids = that.market_ids
        that.marketData = that.marketDataList
      } else {
        that.form.market_ids = []
        that.marketData = []
      }
    },
    // 营销列表
    marketList() {
      marketList().then((res) => {
        let list = []
        this.marketData = res.data.filter((i) => {
          if (i.is_enable && i.is_open && !this.form.market_ids.includes(i.id)) {
            this.form.market_ids.push(i.id)
          }
          return i.is_enable == 1
        })
        this.getPrice(this.form.price)
      })
    },
    // 关闭弹窗
    beforeClose() {
      ElMessageBox.confirm('是否关闭?')
        .then(() => {
          this.resetForm()
          this.$emit('handleClose')
        })
        .catch(() => {})
    },
    // 文件选择回调
    fileSubmit(files) {
      this.form.vid_img = files[0]['file_url']
      this.fileDialog = false
    },
    // 照片上传回调
    contentFileSubmit(files) {
      if (this.uploadFileType == 'content') {
        files.forEach((element) => {
          this.form.img_url_list_main.push(element['file_url'])
        })
        this.form.img_url_list_main = [...new Set(this.form.img_url_list_main)]
        this.contentFileDialog = false
      } else {
        files.forEach((element) => {
          this.form.img_url_list.push(element['file_url'])
        })
        this.form.img_url_list = [...new Set(this.form.img_url_list)]
        this.contentFileDialog = false
      }
    },
    // 金额
    amount(rule, value, callback) {
      console.log(Number(value) > 2999, 'value')
      if (value === '') return callback(new Error('输入金额有误!'))
      if (Number(value) > 2999) return callback(new Error('输入的金额不得大于2999.00元!'))
      if (/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value) || value == 0) {
        callback()
      } else {
        callback(new Error('输入金额有误!'))
      }
    },
    // 金额
    msAmount(rule, value, callback) {
      if (value === '') return callback(new Error('请输入秒杀金额!'))
      if (Number(value) > 2999) return callback(new Error('输入的金额不得大于2999.00元!'))
      if (/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value) || value == 0) {
        callback()
      } else {
        callback(new Error('请输入秒杀金额!'))
      }
    },
    // 文字检测
    async detectionText(rule, value, callback, title) {
      let data = await check({ text: value })
      console.log(data, 'data')
      if (!data.data.flag) {
        callback()
      } else {
        console.log(data, 'violations')
        callback(new Error(`不能${data.msg} "${data.data.violations}"`))
      }
    },
    getMatch() {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      this.form.category_ids = [this.category_ids]
      this.form.match_info = ''
      this.form.match_data = ''
      axios({
        url: this.matchApi[this.form.category_ids],
        method: 'post',
        data: {
          search_day: this.form.match_date,
          search_type: 4
        },
        headers: { 'Content-Type': undefined }
      }).then((response) => {
        if (response.status === 200) {
          if (response.data.code == 1) {
            this.options = response.data.data.map((item) => {
              return {
                value: JSON.stringify({
                  match_id: item.match_id,
                  match_time: dayjs(item.match_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                  home_team_info: item.home_team,
                  away_team_info: item.away_team,
                  competition_info: item.competition
                }),
                label: `赛事:${item.competition.name}, 主队:[${
                  item.home_team.team_name
                }] VS 客队:[${item.away_team.team_name}],赛事时间：${dayjs(
                  item.match_time * 1000
                ).format('YYYY-MM-DD HH:mm:ss')}`
              }
            })
          } else {
            this.$message.error(response.data.msg)
          }
        } else {
          this.$message.error('网络异常')
        }
        this.isLoading = false
      })
    },
    // 图表数据接口
    kuiperMarket(obj) {
      kuiperMarket(obj).then((res) => {
        if (res.code == 200) {
          this.form.kuiper_data = res.data
        }
      })
    },
    // 选中生成雷达图表
    radarChartChange() {
      if (this.form.match_data) {
        let item = JSON.parse(this.form.match_data)
        let obj = {
          match_id: item.match_id,
          match_type: this.form.category_ids[0] == 3 ? 1 : 2
        }
        this.kuiperMarket(obj)
      }
    },
    // 选中赛程
    handleMatchChange() {
      if (this.form.match_info) {
        this.form.match_data = this.form.match_info
        let item = JSON.parse(this.form.match_info)
        this.form.match_nick =
          item.home_team_info.team_name + ' VS ' + item.away_team_info.team_name
        // 赋值方案过期时间
        // 使用dayjs解析日期字符串
        const date = dayjs(item.match_time)
        // 加上一个小时
        const newDate = date.add(1, 'hour')
        this.form.expires_time = newDate.format('YYYY-MM-DD HH:mm:ss')
        let obj = {
          match_id: item.match_id,
          match_type: this.form.category_ids[0] == 3 ? 1 : 2
        }
        if (this.category_ids == 3) {
          this.kuiperMarket(obj)
        } else {
          this.form.kuiper_data = []
        }
      }
    },
    // 删除
    deleImg(index, type) {
      if (type == 'content') {
        this.form.img_url_list_main.splice(index, 1)
      } else {
        this.form.img_url_list.splice(index, 1)
      }
    },
    // 屏蔽谁回调
    handleInvisibleComplete(e) {
      this.form.invisible_ids = e
    },
    // 重置
    resetForm() {
      this.form = {
        content_id: '', // 方案id
        // 赛程日期
        match_date: dayjs().format('YYYY-MM-DD'),
        category_ids: [], // 类型：3 足球 4 篮球
        name: '',
        title: '', // 方案标题
        expires_time: '', // 方案过期时间
        match_info: '', // 方案关联的赛事(json)
        match_data: '', // 方案关联的赛事(json)
        price: 288, // 价格
        description: '', // 方案描述
        content: '', // 方案付费内容
        img_url_list: [], //付费图片
        img_url_list_main: [], //付费图片
        img_main: '', //正文付费图片墙
        img_url: '', //简介图片墙
        is_top: 0, // 是否置顶，1是0否
        is_hot: 0, // 是否热门，1是0否
        is_rec: 0, // 是否推荐，1是0否
        is_disable: 0, // 是否禁用，1是0否
        wechat_id: '', // 方案关联公众号
        invisible_ids: [], // 屏蔽不让查看的会员id,逗号分割
        release_time: '', // 定时发布时间
        push_fans: 0, // 方案发布时是否向粉丝推送(1-推送,0-不推送)
        poster_info: 1, // 海报信息
        draft_status: 1, // 草稿状态(1-是,0-否)
        match_nick: '',
        market_ids: [], //营销方案
        seckill_price: null, //秒杀价格
        seckill_expire: '', //秒杀时间
        seckill_stock: null, //秒杀库存
        surplus_show: null, //虚拟总数
        hits_show: '', //不知道啥就是要传这个字段
        kuiper_data: [] //图表数据
      }
      this.market_ids = []
      this.marketDataList = []
      this.is_match_info = false
      this.selectIndex = 1
      this.isPushFans = 0
      this.price = 288
      this.category_ids = 3
      this.options = []
      // this.wechat_list = []
      this.historyMatchInfo = {
        match_info: '',
        match_nick: '',
        expires_time: ''
      }
      this.is_match_info = false

      this.$emit('reset-edit-data')
    },
    handleCheckBox() {
      if (this.is_match_info) {
        // 存储历史选择赛程信息
        this.historyMatchInfo = {
          match_info: this.form.match_info,
          match_nick: this.form.match_nick,
          expires_time: this.form.expires_time
        }
        this.form.match_info = ''
        this.form.match_nick = ''
        this.form.expires_time = ''
        this.form.kuiper_data = []
        this.form.match_data = ''
      } else {
        this.form.match_info = this.historyMatchInfo.match_info
        this.form.match_nick = this.historyMatchInfo.match_nick
        this.form.expires_time = this.historyMatchInfo.expires_time
        this.form.kuiper_data = []
        this.form.match_data = ''
        // if (!this.options.length)
      }
      this.getMatch()
    },
    marketDataChange(e) {
      if (e && this.form.market_ids.includes(6)) {
        this.form.match_data = this.form.match_info
      }
    },
    beforeAvatarUpload(e) {
      console.log(e.file, 'file')
      let self = this
      if (self.uploader) {
        self.uploader.stopUpload()
        self.authProgress = 0
        self.statusText = ''
      }
      self.uploader = self.createUploader()
      let paramData = { Vod: {} }
      paramData.Vod['FileName'] = e.file.name.split('.')[1]
      paramData.Vod['Title'] = e.file.name
      paramData.Vod['CateId'] = import.meta.env.VITE_USER_NODE_ENV === 'development' ? 13697 : 13698
      self.uploader.addFile(e.file, null, null, null, JSON.stringify(paramData))
      self.uploadDisabled = false
      self.pauseDisabled = true
      self.resumeDisabled = false
    },
    createUploader() {
      let self = this
      const userStore = useUserStoreHook()
      let uploader = new AliyunUpload.Vod({
        timeout: 60000,
        partSize: Math.round(1048576),
        parallel: 5,
        retryCount: 3,
        retryDuration: 2,
        region: 'cn-shenzhen',
        userId: `user_${userStore.user.user_id}`,
        localCheckpoint: true, //此参数是禁用服务端缓存
        // 添加文件成功
        addFileSuccess: function (uploadInfo) {
          self.uploadDisabled = false
          self.resumeDisabled = false
          self.statusText = '添加文件成功, 等待上传...'
          console.log('addFileSuccess: ' + uploadInfo.file.name)
          self.stsUpload()
        },
        // 开始上传
        onUploadstarted: async function (uploadInfo) {
          console.log('开始上传', uploadInfo)
          // 如果是 STSToken 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
          // 用户需要自己获取 accessKeyId, accessKeySecret,secretToken
          const result = await getStsToken({})
          if (result.code === 200) {
            console.log(result.data)
            uploader.setSTSToken(
              uploadInfo,
              result.data.AccessKeyId,
              result.data.AccessKeySecret,
              result.data.SecurityToken
            )
          }
          self.statusText = '文件开始上传...'
          // uni.showToast({
          //   title: '视频上传中,请耐心等待',
          //   icon: 'none',
          //   duration: 3000
          // })
          self.spLoading = true
          console.log(
            'onUploadStarted:' +
              uploadInfo.file.name +
              ', endpoint:' +
              uploadInfo.endpoint +
              ', bucket:' +
              uploadInfo.bucket +
              ', object:' +
              uploadInfo.object
          )
        },
        // 文件上传成功
        onUploadSucceed: function (uploadInfo) {
          // console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo
          // 	.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
          console.log('上传成功：', uploadInfo)
          this.spLoading = false
          self.form.vid = uploadInfo.videoId
          self.statusText = '文件上传成功!'
          ElMessage.success('视频上传成功')
        },
        // 文件上传失败
        onUploadFailed: function (uploadInfo, code, message) {
          console.log(
            'onUploadFailed: file:' +
              uploadInfo.file.name +
              ',code:' +
              code +
              ', message:' +
              message
          )
          self.statusText = '文件上传失败!'
          self.spLoading = false
          ElMessage.error('视频上传失败！')
        },
        // 取消文件上传
        onUploadCanceled: function (uploadInfo, code, message) {
          console.log(
            'Canceled file: ' + uploadInfo.file.name + ', code: ' + code + ', message:' + message
          )
          self.spLoading = false
          self.statusText = '文件已暂停上传'
        },
        // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
        onUploadProgress: function (uploadInfo, totalSize, progress) {
          console.log(
            'onUploadProgress:file:' +
              uploadInfo.file.name +
              ', fileSize:' +
              totalSize +
              ', percent:' +
              Math.ceil(progress * 100) +
              '%'
          )
          let progressPercent = Math.ceil(progress * 100)
          self.spLoading = false
          self.stsProgress = progressPercent
          self.statusText = '文件上传中...'
        },
        // 上传凭证超时
        onUploadTokenExpired: async function (uploadInfo) {
          console.log('上传凭证超时')
          // 如果是上传方式二即根据 STSToken 实现时，从新获取STS临时账号用于恢复上传
          // 上传文件过大时可能在上传过程中 sts token 就会失效, 所以需要在 token 过期的回调中调用 resumeUploadWithSTSToken 方法
          const result = await getStsToken({})
          if (result.code === 200) {
            console.log(result.data)
            uploader.resumeUploadWithSTSToken(
              result.data.AccessKeyId,
              result.data.AccessKeySecret,
              result.data.SecurityToken,
              result.data.Expiration
            )
          }
          self.statusText = '文件超时...'
          self.spLoading = false
          ElMessage.error('视频上传超时！')
        },
        // 全部文件上传结束
        onUploadEnd: function (uploadInfo) {
          console.log('onUploadEnd: uploaded all the files')
          this.spLoading = false
          self.statusText = '文件上传完毕'
        }
      })
      console.log(uploader)
      return uploader
    },
    // 开始上传
    stsUpload() {
      // 然后调用 startUpload 方法, 开始上传
      if (this.uploader !== null) {
        this.uploader.startUpload()
        this.uploadDisabled = true
        this.pauseDisabled = false
      }
    },
    // 暂停上传
    pauseUpload() {
      if (this.uploader !== null) {
        this.uploader.stopUpload()
        this.resumeDisabled = false
        this.pauseDisabled = true
      }
    },
    // 恢复上传
    resumeUpload() {
      if (this.uploader !== null) {
        this.uploader.startUpload()
        this.resumeDisabled = true
        this.pauseDisabled = false
      }
    }
  }
}
</script>
<style>
.el-tabs__nav-wrap::after {
  content: none;
}
</style>
<style lang="scss" scoped>
:deep(.el-radio.el-radio--large) {
  height: 32px;
}
:deep(.el-main) {
  padding: 0;
}
.uploadImg {
  border: 1px dashed var(--el-border-color);
  text-align: center;
  width: 98px;
  height: 98px;
  line-height: 28px;
  padding-top: 20px;
  margin-right: 12px;
  margin-bottom: 16px;
}
.upload_vid_img {
  width: 98px;
  height: 98px;
  padding-top: 28px;
  position: relative;
  border-radius: 6px;
  ::v-deep .el-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    img {
      object-fit: cover !important;
    }
  }
}
.custom-select-btn {
  width: 100%;
  .item {
    width: calc(33.33% - 10px);
    min-width: 52px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    box-sizing: content-box;
    cursor: pointer;
  }
  .item.active {
    background-color: #005266;
    color: #ffffff;
    border: 1px solid #005266;
  }
}
.on_top {
  .item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    box-sizing: content-box;
    cursor: pointer;
  }
  .item.active {
    background-color: #005266;
    color: #ffffff;
    border: 1px solid #005266;
  }
}
.category-select-btn {
  .item {
    width: 65px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    box-sizing: content-box;
    cursor: pointer;
  }
  .item.active {
    background-color: #005266;
    color: #ffffff;
    border: 1px solid #005266;
  }
}
.el-checkbox {
  margin-right: 30px;
}
.displayStyle {
  ::v-deep .el-form-item__content {
    display: block;
    // .el-form-item__error{
    //   display: none;
    // }
  }
}
</style>
<style>
.avatar-uploader .avatar {
  width: 98px;
  height: 98px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon-video {
  font-size: 28px;
  color: #8c939d;
  width: 98px;
  height: 98px;
  text-align: center;
}
</style>
